import { useEffect, useRef } from "react";
import { Card } from "@/components";
import { GaugeChart, NegativeChart, LineChart, Battery } from "@/components";


export default function BatteryCard(props) {
  const list = [
    { label: "11:30", value: 400 },
    { label: "11:31", value: 932 },
    { label: "11:32", value: 700 },
    { label: "11:33", value: 360 },
    { label: "11:34", value: 800 },
    { label: "11:35", value: 400 },
    { label: "11:36", value: 932 },
    { label: "11:37", value: 650 },
    { label: "11:38", value: 360 },
    { label: "11:39", value: 540 },
  ];


  return (
    <Card>

      <div className='flex flex-row justify-center'>
        <Battery style={{ width: '100px', height: '50px' }} fontSize={20} value={45}></Battery>
      </div>

      <div className=" h-48">
        <GaugeChart title="电池组电压" value={90} angle={[190, -10]} split={5} max={150}></GaugeChart>
      </div>

      <div className=" h-48">
        <LineChart title="电池组电流" data={list}></LineChart>
      </div>

      <div className=" h-48">
        <NegativeChart legend="单体电压" data={[{ label: '最高单体电压', value: 300 }, { label: '最低单体电压', value: 300 }]}></NegativeChart>
      </div>
      <div className=" h-48">
        <NegativeChart legend="电池温度" data={[{ label: '最高温度', value: 300 }, { label: '最低温度', value: 300 }]}></NegativeChart>
      </div>
    </Card>
  );
}
